<script>
  import sheep from '@/sheep';
  import SuSticky from '@/sheep/ui/su-sticky/su-sticky.vue';
  import dayjs from 'dayjs';
  import { calendar } from '@/sheep/components/s-better-calendar/calendar';
  import UniCol from '@/uni_modules/uni-row/components/uni-col/uni-col.vue';
  import MpHtml from '@/pages/nc_chat/components/ua2-markdown/mp-html/mp-html.vue';
  import MarkLists from '@/pages/pc/components/marklists.vue';

  export default {
    name: 'homePage',
    components: { MarkLists, MpHtml, UniCol, SuSticky },
    data() {
      return {
        list: [
          { name: '中华姓氏' },
          { name: '拜祖寻根' },
          { name: '缅怀英烈' },
          { name: '历史今天' },
          { name: '节日节气' },
          { name: '老黄历' },
        ],
        current: 0,
        value: '',
        // 姓氏列表
        familyNameList: [],
        // 拜祖寻根列表
        ancestorList: [],
        // 三皇五帝
        emperor: [],
        // 英烈
        mournList: [],
        // 选中的姓氏
        familyNameCurrent: 0,
        headerHeight: 0,
        // 始祖详情
        surnameDetail: {},
        zimuList: [
          {
            name: '全部',
          },
          {
            name: 'A',
          },
          {
            name: 'B',
          },
          {
            name: 'C',
          },
          {
            name: 'D',
          },
          {
            name: 'E',
          },
          {
            name: 'F',
          },
          {
            name: 'G',
          },
          {
            name: 'H',
          },
          {
            name: 'I',
          },
          {
            name: 'J',
          },
          {
            name: 'K',
          },
          {
            name: 'L',
          },
          {
            name: 'M',
          },
          {
            name: 'N',
          },
          {
            name: 'O',
          },
          {
            name: 'P',
          },
          {
            name: 'Q',
          },
          {
            name: 'R',
          },
          {
            name: 'S',
          },
          {
            name: 'T',
          },
          {
            name: 'U',
          },
          {
            name: 'V',
          },
          {
            name: 'W',
          },
          {
            name: 'X',
          },
          {
            name: 'Y',
          },
          {
            name: 'Z',
          },

        ],
        // 拜祖寻根选择项
        ancestorIndex: 0,
        ancestorParam: {
          page: 1,
          pagesize: 20,
          total: 0,
        },
        mournParam: {
          page: 1,
          pagesize: 21,
          total: 0,
        },
        realTimeTime: '',
        // 今天的信息
        todayInfo: {},
        // 历史今天
        historyTodayList: [],
        // 选中的年份
        todayIndex: 0,
        // 历史今天信息
        historyTodayInfo: {},
        // 节日节气
        solarTermFestivalList: {},
        // 老黄历
        oldYellowCalendarInfo: {},
      };
    },
    props: {
      pageWidth: {
        type: Number,
        default: 0,
      },
      pageHeight: {
        type: Number,
        default: 0,
      },
    },
    computed: {
      sq_image_path() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    watch: {
      todayIndex: {
        async handler(newValue, oldValue) {
          await this.getHistoryDetail(newValue);
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      this.getRealTimeTime();
      this.todayInfo = calendar.solar2lunar(dayjs(new Date().getTime()).format('YYYY'), dayjs(new Date().getTime()).format('MM'), dayjs(new Date().getTime()).format('DD'));
    },
    async mounted() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('#homePageHeader').boundingClientRect((rect) => {
          this.headerHeight = rect.height;
        }).exec();
      });
      this.ancestorList = [];
      this.mournList = [];
      await this.getAllSurname();
      await this.getAncestor();
      await this.getEmperor();
      await this.getMourn();
      await this.getHistoryToday();
      await this.getSolarTermFestivalList();
      await this.getChineseAlmanac();
    },
    methods: {
      // 获取老黄历
      async getChineseAlmanac() {
        let { data } = await sheep.$api.surname.getStuffInfo();
        this.oldYellowCalendarInfo = data;
        this.oldYellowCalendarInfo.list = [
          { ...this.oldYellowCalendarInfo.jishi.zi, name: '子时' },
          { ...this.oldYellowCalendarInfo.jishi.chou, name: '丑时' },
          { ...this.oldYellowCalendarInfo.jishi.yin, name: '寅时' },
          { ...this.oldYellowCalendarInfo.jishi.mao, name: '卯时' },
          { ...this.oldYellowCalendarInfo.jishi.cheng, name: '辰时' },
          { ...this.oldYellowCalendarInfo.jishi.si, name: '巳时' },
          { ...this.oldYellowCalendarInfo.jishi.wu, name: '午时' },
          { ...this.oldYellowCalendarInfo.jishi.wei, name: '未时' },
          { ...this.oldYellowCalendarInfo.jishi.shen, name: '申时' },
          { ...this.oldYellowCalendarInfo.jishi.you, name: '酉时' },
          { ...this.oldYellowCalendarInfo.jishi.xu, name: '戌时' },
          { ...this.oldYellowCalendarInfo.jishi.hai, name: '亥时' },
        ];
        console.log(this.oldYellowCalendarInfo);
      },
      // 历史今天时间
      getRealTimeTime() {
        setInterval(() => {
          this.realTimeTime = dayjs(new Date().getTime()).format('YYYY年MM月DD日 HH:mm:ss');
        }, 100);
      },
      // 获取历史今天
      async getHistoryToday() {
        let { data } = await sheep.$api.surname.getHistoryToday();
        this.historyTodayList = data;
        await this.getHistoryDetail(0);
      },
      // 获取历史今天详情
      async getHistoryDetail(index) {
        const { data } = await sheep.$api.surname.getHistoryDetail({
          id: this.historyTodayList[index].id,
        });
        this.historyTodayInfo = data;
      },
      // 获取中华姓氏
      async getAllSurname() {
        const { data } = await sheep.$api.surname.getAllSurname({
          cid: 4,
          code: this.value,
        });
        this.familyNameList = data.list;
        await this.getSurnameDetail(this.familyNameList[0].id);
      },
      // 获取拜祖寻根
      async getAncestor() {
        const { data } = await sheep.$api.surname.getAllSurname({
          cid: 4,
          code: this.value,
          page: this.ancestorParam.page,
          pagesize: this.ancestorParam.pagesize,
        });
        data.list.forEach((item) => {
          this.ancestorList.push(item);
        });
        this.ancestorParam.total = data.count;
      },
      // 获取三皇五帝
      async getEmperor() {
        const { data } = await sheep.$api.surname.getEmperor();
        this.emperor = data;
      },
      // 获取缅怀英烈
      async getMourn() {
        const { data } = await sheep.$api.surname.getAllSurname({
          cid: 5,
          code: this.value,
          page: this.mournParam.page,
          pagesize: this.mournParam.pagesize,
        });
        data.list.forEach((item) => {
          this.mournList.push(item);
        });
        this.mournParam.total = data.count;
      },
      async getSurnameDetail(id) {
        const { data } = await sheep.$api.surname.getSurnameDetail({
          id: id,
        });
        this.surnameDetail = data;
      },
      async selectIndex(index) {
        this.familyNameCurrent = index;
        await this.getSurnameDetail(this.familyNameList[index].id);
      },
      async ancestorLikes() {

      },
      async shareAll() {

      },
      selectZimu(index) {
        this.ancestorIndex = index;
      },
      // 选中的历史今天下标
      selectTodayIndex(index) {
        this.todayIndex = index;
      },
      // 选择的节日节气
      selectFestivals(info) {
        this.$emit('selectFestivals', info);
      },
      // 获取节日节气
      async getSolarTermFestivalList() {
        const { data } = await sheep.$api.surname.getFestivalList({
          search: '',
        });
        this.solarTermFestivalList = data;
      },
      // 姓氏树查看详情
      viewDetails() {
        this.$emit('viewDetails');
      },
      // 查看姓氏详情
      surnameDetails() {
        this.$emit('surnameDetails', this.surnameDetail);
      },
      getMoreOriginals() {
        if (this.ancestorParam.page * this.ancestorParam.pagesize < this.ancestorParam.total) {
          this.ancestorParam.page++;
          this.getAncestor();
        }
      },
      getMoreHeroes() {
        if (this.mournParam.page * this.mournParam.pagesize < this.mournParam.total) {
          this.mournParam.page++;
          this.getMourn();
        }
      },
      // 缅怀英烈
      martyrJump(info){
        sheep.$router.go('/pages/chineseSurname/brave',{id:info.id})
      }
    },
  };
</script>

<template>
  <uni-row class="flex flex-column" style="position: relative;width: 100%;">
    <uni-col id="homePageHeader" :span="24">
      <scroll-view scroll-x="true"
                   style="width: 100%;border-radius: 8px;padding:  0 0 20px 0;white-space: nowrap;flex-direction: row;"
                   class="bg_FFFFFF" enable-flex
      >
        <view style="display: inline-block">
          <view class="flex" style="white-space: nowrap">
            <view v-for="(item,index) in list"
                  :key="index"
                  class="fw_500 flex align-center justify-center"
                  style="font-size: 24px;color: #6F6F6F;margin:20px 20px 0 20px;cursor:pointer;width: 146px;height: 50px;border-radius: 8px;white-space: nowrap"
                  :style="{
                background: index == current ? '#FF4206' : 'transparent',
                color: index == current ? '#FFFFFF' : '#6F6F6F',
                border: index == current ? '1px solid #FF4206' : '1px solid #DBDBDB',
              }"
                  @click.stop="current = index"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
      </scroll-view>
    </uni-col>
    <!--  中华姓氏  -->
    <uni-row style="margin-top: 10px;" class="flex align-center justify-between flex-sub"
             v-if="current == 0"
    >
      <uni-col :xs="6" :sm="12" :md="18" :lg="18" :xl="18" class="bg_FFFFFF flex flex-column align-center"
               style="border-radius: 8px"
               :style="{height: `calc(95vh - ${headerHeight + 10}px)`}"
      >
        <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
              class="flex align-center justify-between">
          <view class="flex align-end" style="margin-left: 20px;">
            <view class="flex align-center">
              <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
              <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                中华姓氏
              </view>
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">百家姓
            </view>
          </view>
          <view v-if="pageWidth > 1000"
                style="width: 148px;height: 30px;border-radius: 15px;overflow: hidden;border: 1px solid #BCBCBC;margin-right: 20px;"
                class="flex align-center"
          >
            <input type="text" v-model="value" placeholder="搜索" style="margin-left: 10px;">
            <text class="iconfont icon-ic_search" style="margin-right: 15rpx;cursor:pointer;"></text>
          </view>
        </view>
        <scroll-view scroll-y
                     style="width: 90%;margin-top: 10px;"
                     :style="{height: `calc(95vh - ${headerHeight + 10 + 95}px)`}"
        >
          <view style="width: 100%;" class="flex flex-column align-center">
            <view style="width: 95%;flex-wrap: wrap;" class="flex align-center">
              <view v-for="(item,index) in familyNameList"
                    :key="index"
                    :class="familyNameCurrent == index ? 'active' : 'no_active'"
                    style="width: 70px;height: 70px;margin-right: 10px;margin-bottom: 10px;cursor:pointer;"
                    class="flex align-center justify-center"
                    @click.stop="selectIndex(index)"
              >
                <view style="font-weight: 500;"
                      class="flex align-center justify-center"
                      :style="{
                        fontSize:item.surname.length < 2 ? '42px' :  '26px'
                      }"
                >
                  <view :style="{
                          width: item.surname.length < 2 ? '42px' : '52px',
                        }"
                  >
                    {{ item.surname }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </uni-col>
      <uni-col :xs="18" :sm="12" :md="6" :lg="6" :xl="6"
               style="margin-left: 10px;"
               :style="{height: `calc(95vh - ${headerHeight + 10}px)`}"
      >
        <scroll-view scroll-y="true"
                     style="height: 100%;border-radius: 8px">
          <view style="width: 100%;border-radius: 8px" class="flex flex-column align-center bg_FFFFFF">
            <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
                  class="flex align-center justify-between"
            >
              <view class="flex align-end" style="margin-left: 20px;">
                <view class="flex align-center">
                  <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
                  <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                    {{ surnameDetail.surname }}姓始祖
                  </view>
                </view>
              </view>
            </view>
            <view style="margin-top: 25px;width: 80%" @click.stop="surnameDetails">
              <image :src="surnameDetail.image_input" style="width: 100%;" mode="widthFix"></image>
            </view>
            <view style="font-size: 24px;margin-top: 19px;" class="fw_500 color_292929">
              {{ surnameDetail.ancestors }}
            </view>
            <view style="font-size: 17px;margin-top: 22px;" class="color_4B4B4B fw_500">
              百家姓 第{{ surnameDetail.ranking }}名 总人口{{ surnameDetail.population }}
            </view>
            <view class="flex align-center justify-around"
                  style="margin-top: 37px;width: 90%;">
              <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                    style="position: relative" @click.stop="ancestorLikes">
                <image class="mrZhongWu_founder_right_operation_list_image"
                       :src="surnameDetail.is_like == 1 ? `${sq_image_path}/chineseSurname/sq_thumbsUp_select.png`:`${sq_image_path}/chineseSurname/sq_thumbsUp.png`"
                ></image>
                <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">
                  点赞{{ surnameDetail.likes || 0 }}
                </text>
                <!--                        <image :src="`${IMG_URL}dianzan_gif.gif`" v-if="showGif" class="gif"></image>-->
              </view>
              <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                    @click="goXINHUA(founder.id)">
                <image class="mrZhongWu_founder_right_operation_list_image"
                       :src="`${sq_image_path}/chineseSurname/sq_comments.png`"></image>
                <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">
                  评论{{ surnameDetail.comment || 0 }}
                </text>
              </view>
              <!-- #ifdef MP-WEIXIN -->
              <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                    style="position: relative">
                <image class="mrZhongWu_founder_right_operation_list_image"
                       :src="`${sq_image_path}/chineseSurname/sq_share.png`"></image>
                <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">分享</text>
                <button open-type="share" :data-surname="surnameDetail.surname"
                        style="position: absolute;top: 0;left: 50%;transform: translateX(-50%);height: 75rpx;opacity: 0"></button>
              </view>
              <!-- #endif -->
              <!-- #ifndef MP-WEIXIN -->
              <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                    style="position: relative"
                    @click.stop="shareAll"
              >
                <image class="mrZhongWu_founder_right_operation_list_image"
                       :src="`${sq_image_path}/chineseSurname/sq_share.png`"></image>
                <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">分享</text>
              </view>
              <!-- #endif -->
            </view>
            <view class="flex align-center justify-center bg_FF4206 fw_500 color_FFFFFF"
                  style="width: 80%;height: 43px;border-radius: 50px;font-size: 20px;margin-top: 47px;margin-bottom: 31px;cursor:pointer;"
            >
              去献花
            </view>
          </view>
          <view style="width: 100%;border-radius: 8px;margin-top: 16px;"
                class="flex flex-column align-center bg_FFFFFF">
            <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
                  class="flex align-center justify-between">
              <view class="flex align-end" style="margin-left: 20px;">
                <view class="flex align-center">
                  <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
                  <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                    姓氏树
                  </view>
                </view>
              </view>
            </view>
            <view class="flex flex-column align-center"
                  style="width: 90%;border: 1px solid #FAD582;background: #FFF8E8;margin-top: 19px;margin-bottom: 19px;border-radius: 16px">
              <image :src="`${sq_image_path}/chineseSurname/surnameTree.png`" mode="widthFix"
                     style="width: 70%;margin-top: 38px;"></image>
              <view class="fw_500" style="color: #5C5C5C;font-size: 19px;margin-top: 15px;">
                姓氏树
              </view>
              <view class="flex align-center justify-center bg_FF4206 fw_500 color_FFFFFF"
                    style="width: 80%;height: 43px;border-radius: 50px;font-size: 20px;margin-top: 47px;margin-bottom: 31px;cursor:pointer;"
                    @click.stop="viewDetails"
              >
                查看详情
              </view>
            </view>
          </view>
        </scroll-view>
      </uni-col>
    </uni-row>
    <!-- 拜祖寻根 -->
    <uni-row style="margin-top: 10px;" class="flex align-center justify-between flex-sub"
             v-if="current == 1"
    >
      <uni-col :xs="6" :sm="12" :md="18" :lg="18" :xl="18" class="bg_FFFFFF flex flex-column align-center"
               style="border-radius: 8px"
               :style="{height: `calc(95vh - ${headerHeight + 10}px)`}"
      >
        <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
              class="flex align-center justify-between">
          <view class="flex align-end" style="margin-left: 20px;">
            <view class="flex align-center">
              <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
              <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                拜祖寻根
              </view>
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              得姓始祖
            </view>
          </view>
          <view v-if="pageWidth > 1000"
                style="width: 148px;height: 30px;border-radius: 15px;overflow: hidden;border: 1px solid #BCBCBC;margin-right: 20px;"
                class="flex align-center"
          >
            <input type="text" v-model="value" placeholder="搜索" style="margin-left: 10px;">
            <text class="iconfont icon-ic_search" style="margin-right: 15rpx;cursor:pointer;"></text>
          </view>
        </view>

        <scroll-view scroll-y
                     style="width: 90%;margin-top: 10px;"
                     :style="{height: `calc(95vh - ${headerHeight + 10 + 95}px)`}"
                     @scrolltolower="getMoreOriginals"
                     :lower-threshold="200"
        >
          <view style="width: 100%;" class="flex flex-column align-center">
            <view style="width: 95%;flex-wrap: wrap" class="flex align-center">
              <view v-for="(item,index) in zimuList" :key="index"
                    style="margin-right: 10px;padding: 4px 20px;white-space: nowrap;cursor:pointer;border-radius: 15px;border: 1px solid #BCBCBC;margin-bottom: 10px;font-size: 20px;color: #363636"
                    :style="{
                      color:ancestorIndex == index ? '#FFFFFF' : '#363636',
                      background:ancestorIndex == index ? '#FF4206' : 'transparent',
                      border:ancestorIndex == index ? '1px solid #FF4206' : '1px solid #BCBCBC',
                    }"
                    @click.stop="selectZimu(index)"
              >
                {{ item.name }}
              </view>
            </view>
            <view style="width: 95%;flex-wrap: wrap;" class="flex align-center">
              <view v-for="(item,index) in ancestorList"
                    :key="index"
                    style="width: 188px;height: 299px;margin-right: 10px;margin-bottom: 10px;cursor:pointer;border: 2px solid #FDAF00;border-radius: 8px;background: #FFE9BA"
                    class="flex flex-column align-center justify-center"
                    @click.stop="selectIndex(index)"
              >
                <image :src="`${item.image_input}`"
                       style="width:178px;border-radius: 8px;background: #FAF4E8;overflow: hidden"
                       mode="widthFix"></image>
                <view style="font-size: 14px;font-weight: 500;color:#865D01;margin-top: 5px;">
                  {{ item.ancestors }}
                </view>
                <view style="font-size: 24px;width: 135px;height: 41px;margin-bottom: 10px;margin-top: 10px;"
                      class="fw_500 color_FFFFFF firstAncestor_bg flex align-center justify-center">
                  {{ item.surname }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </uni-col>
      <uni-col :xs="18" :sm="12" :md="6" :lg="6" :xl="6"
               style="margin-left: 10px;"
               :style="{height: `calc(95vh - ${headerHeight + 10}px)`}"
      >
        <scroll-view scroll-y="true"
                     style="height: 100%;border-radius: 8px">
          <view style="width: 100%;border-radius: 8px;"
                class="flex flex-column align-center bg_FFFFFF">
            <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
                  class="flex align-center justify-between">
              <view class="flex align-end" style="margin-left: 20px;">
                <view class="flex align-center">
                  <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
                  <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                    三皇五帝
                  </view>
                </view>
              </view>
            </view>
            <view class="flex flex-column align-center" style="margin-top: 10px;width: 100%;">
              <view
                style="width: 98%;background: #CE986E;border-radius: 8px;margin-bottom: 10px;overflow: hidden;cursor:pointer;"
                class="flex flex-column align-center"
                v-for="(item,index) in emperor"
                :key="index"
              >
                <image :src="item.image_list" style="width: 100%;border-radius: 8px;" mode="widthFix"></image>
                <view class="genealogy_bg_icon color_FFFFFF fw_500 "
                      style="margin-top: 15px;margin-bottom: 15px;padding: 10px 50px;font-size: 20px;">
                  {{ item.ancestors }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </uni-col>
    </uni-row>
    <!-- 缅怀英烈 -->
    <uni-row style="margin-top: 10px;" class="flex align-center justify-between flex-sub"
             v-if="current == 2"
    >
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="bg_FFFFFF flex flex-column align-center"
               style="border-radius: 8px"
               :style="{height: `calc(95vh - ${headerHeight + 10}px)`}"
      >
        <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
              class="flex align-center justify-between">
          <view class="flex align-end" style="margin-left: 20px;">
            <view class="flex align-center">
              <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
              <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                缅怀英烈
              </view>
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              英雄和烈士
            </view>
          </view>
          <view v-if="pageWidth > 1000"
                style="width: 148px;height: 30px;border-radius: 15px;overflow: hidden;border: 1px solid #BCBCBC;margin-right: 20px;"
                class="flex align-center"
          >
            <input type="text" v-model="value" placeholder="搜索" style="margin-left: 10px;">
            <text class="iconfont icon-ic_search" style="margin-right: 15rpx;cursor:pointer;"></text>
          </view>
        </view>

        <scroll-view scroll-y
                     style="width: 96%;margin-top: 10px;"
                     :style="{height: `calc(95vh - ${headerHeight + 10 + 95}px)`}"
                     @scrolltolower="getMoreHeroes"
                     :lower-threshold="200"
        >
          <view style="width: 100%;" class="flex flex-column align-center">
            <view style="width: 100%;flex-wrap: wrap" class="flex align-center">
              <view v-for="(item,index) in zimuList" :key="index"
                    style="margin-right: 10px;padding: 4px 20px;white-space: nowrap;cursor:pointer;border-radius: 15px;border: 1px solid #BCBCBC;margin-bottom: 10px;font-size: 20px;color: #363636"
                    :style="{
                      color:ancestorIndex == index ? '#FFFFFF' : '#363636',
                      background:ancestorIndex == index ? '#FF4206' : 'transparent',
                      border:ancestorIndex == index ? '1px solid #FF4206' : '1px solid #BCBCBC',
                    }"
                    @click.stop="selectZimu(index)"
              >
                {{ item.name }}
              </view>
            </view>
            <view style="width: 100%;flex-wrap: wrap;" class="flex align-center">
              <view v-for="(item,index) in mournList"
                    :key="index"
                    style="width: 202px;height: 367px;margin-right: 10px;margin-bottom: 10px;cursor:pointer;border: 2px solid #FDAF00;border-radius: 8px;background: #FFE9BA"
                    class="flex flex-column align-center justify-center"
                    @click.stop="martyrJump(item)"
              >
                <image :src="`${item.image_input}`"
                       style="width:178px;border-radius: 8px;background: #FAF4E8;overflow: hidden"
                       mode="widthFix"></image>
                <view style="font-size: 16px;font-weight: 500;color:#865D01;margin-top: 5px;">
                  {{ item.ancestors }}
                </view>
                <view style="font-size: 24px;color:#363636" class="fw_500">
                  {{ item.surname }}
                </view>
                <view
                  style="width: 80%;height: 35px;border-radius: 18px;color: #865D01;font-size: 16px;margin-top: 10px;"
                  class="bg_FFFFFF flex align-center justify-center fw_500"
                >
                  缅怀英烈
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </uni-col>
    </uni-row>
    <!-- 历史今天 -->
    <uni-row style="margin-top: 10px;width: 100%;"
             class="flex align-center justify-between flex-sub"
             v-if="current == 3"
    >
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="bg_FFFFFF flex flex-column align-center"
               style="border-radius: 8px"
               :style="{height: `calc(95vh - ${headerHeight + 10}px)`}"
      >
        <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
              class="flex align-center justify-between">
          <view class="flex align-end" style="margin-left: 20px;">
            <view class="flex align-center">
              <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
              <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                历史今天
              </view>
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              {{ realTimeTime }}
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              {{ todayInfo.gzYear }}年{{ todayInfo.IMonthCn }}{{ todayInfo.IDayCn }}
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              {{ todayInfo.ncWeek }}
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              第{{ todayInfo.whichWeek }}周
            </view>
          </view>
          <view v-if="pageWidth > 1000"
                style="width: 148px;height: 30px;border-radius: 15px;overflow: hidden;border: 1px solid #BCBCBC;margin-right: 20px;"
                class="flex align-center"
          >
            <input type="text" v-model="value" placeholder="请输入年份" style="margin-left: 10px;">
            <text class="iconfont icon-ic_search" style="margin-right: 15rpx;cursor:pointer;"></text>
          </view>
        </view>

        <view style="width: 96%;margin-top: 10px;overflow-y: scroll"
              :style="{height: `calc(95vh - ${headerHeight + 10 + 95}px)`}"
        >
          <view style="width: 100%;" class="flex flex-column align-center">
            <uni-row style="width: 100%;"
                     class="flex align-center justify-between"
            >
              <uni-col :span="10"
                       :style="{height: `calc(95vh - ${headerHeight + 10 + 95}px)`}"
                       style="background: #DBDBDB;border-radius: 8px;overflow-y: scroll"
              >
                <uni-row style="width: 100%">
                  <view style="height: 10px;"></view>
                  <uni-col :span="12"
                           v-for="(item,index) in historyTodayList"
                           :key="index"
                           style="margin-bottom: 10px;"
                           class="flex align-center justify-center"
                           @click.stop="selectTodayIndex(index)"
                  >
                    <view style="width: 93%;border-radius: 8px;padding: 16px 0;cursor:pointer;"
                          :style="{
                            background: index == todayIndex ? '#FAE6BC' : '#FFFFFF',
                          }"
                    >
                      <view style="margin-left: 16px;margin-right: 16px;font-size: 24px;color: #363636;"
                            class="fw_500"
                      >
                        {{ item.year }}年
                      </view>
                      <view class="fw_400"
                            style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-left: 16px;margin-right: 16px;font-size: 15px;color: #363636;"
                      >
                        {{ item.content }}
                      </view>
                    </view>
                  </uni-col>
                  <view style="height: 10px;"></view>
                </uni-row>
              </uni-col>
              <uni-col :span="13"
                       :style="{height: `calc(95vh - ${headerHeight + 10 + 95}px)`}"
                       style="background: #FFFFFF;border-radius: 8px;overflow-y: scroll;border: 1px solid #DBDBDB"
                       class="flex flex-column align-center"
              >
                <view style="width: 100%;background:#FAE6BC;padding: 10px 0;">
                  <view style="font-size: 24px;color: #363636;margin-left: 10px;margin-right: 10px;" class="fw_500">
                    {{ historyTodayInfo.year }}
                  </view>
                  <view style="color: #363636;font-size: 16px;margin-left: 10px;margin-right: 10px;">
                    {{ historyTodayInfo.year }}年{{ historyTodayInfo.month }}月{{ historyTodayInfo.day }}日
                  </view>
                </view>
                <mp-html :content="historyTodayInfo.content"
                         style="font-size: 20px;color: #363636;width: 96%;line-height: 30px;white-space: pre-wrap;"
                ></mp-html>
              </uni-col>
            </uni-row>
          </view>
        </view>
      </uni-col>
    </uni-row>
    <!-- 节日节气 -->
    <uni-row style="margin-top: 10px;width: 100%;"
             class="flex align-center justify-between flex-sub"
             v-if="current == 4"
    >
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="bg_FFFFFF flex flex-column align-center"
               style="border-radius: 8px"
               :style="{height: `calc(95vh - ${headerHeight + 10}px)`}"
      >
        <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
              class="flex align-center justify-between">
          <view class="flex align-end" style="margin-left: 20px;">
            <view class="flex align-center">
              <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
              <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                节日节气
              </view>
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              {{ realTimeTime }}
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              {{ todayInfo.gzYear }}年{{ todayInfo.IMonthCn }}{{ todayInfo.IDayCn }}
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              {{ todayInfo.ncWeek }}
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              第{{ todayInfo.whichWeek }}周
            </view>
          </view>
          <view v-if="pageWidth > 1000"
                style="width: 148px;height: 30px;border-radius: 15px;overflow: hidden;border: 1px solid #BCBCBC;margin-right: 20px;"
                class="flex align-center"
          >
            <input type="text" v-model="value" placeholder="请输入年份" style="margin-left: 10px;">
            <text class="iconfont icon-ic_search" style="margin-right: 15rpx;cursor:pointer;"></text>
          </view>
        </view>

        <view style="width: 96%;margin-top: 10px;overflow-y: scroll"
              :style="{height: `calc(95vh - ${headerHeight + 10 + 95}px)`}"
        >
          <view style="width: 100%;" class="flex flex-column align-center">
            <uni-row style="width: 100%;"
                     class="flex align-center justify-between"
            >
              <uni-col :span="24"
                       :style="{height: `calc(95vh - ${headerHeight + 10 + 95}px)`}"
                       style="overflow-y: scroll"
              >
                <uni-row style="width: 100%">
                  <view style="height: 10px;"></view>
                  <uni-col :span="8"
                           v-for="(item,index) in solarTermFestivalList"
                           :key="index"
                           style="margin-bottom: 10px;"
                           class="flex align-center justify-around"
                           @click.stop="selectFestivals(item)"
                  >
                    <view style="width: 98%;border-radius: 14px;padding: 16px 0;cursor:pointer;background: #B4D9E2;"
                          class="flex align-center justify-around"
                    >
                      <image :src="item.image_input" style="width: 99px;" mode="widthFix"></image>
                      <view>
                        <view style="width:320rpx;font-size: 31px;color: #0295BD;font-weight: 500;text-overflow: ellipsis;overflow: hidden;white-space: nowrap">{{ item.festival }}</view>
                        <view style="font-size: 16px;color: #048EB6;font-weight: 500;">{{ item.time }}
                          {{ item.week_name }}
                        </view>
                        <view style="font-size: 16px;color: #048EB6;font-weight: 500;">
                          {{ item.lunar_time }}
                        </view>
                      </view>
                      <view>
                        <view class="flex align-center flex-column">
                          <view class="flex align-end"
                                v-if="item.day != 0 && item.day != '今天'">
                            <text style="font-size: 51px;color: #0295BD;font-weight: 500;line-height: 40px">{{ item.day
                              }}
                            </text>
                            <text style="font-size: 13px;color: #0295BD;font-weight: 500;margin-left: 5px;">天</text>
                          </view>
                          <view class="flex align-center" v-else>
                            <text style="font-size: 51px;color: #0295BD;font-weight: 500;line-height: 40px">今天</text>
                          </view>
                        </view>
                        <view style="margin-top: 10px;">
                          <view class="flex flex-row align-center justify-center"
                                style="width: 100px;padding: 5px 0;border-radius: 14px"
                                :style="{
                                  background: '#89CEE0 !important'
                                  }"
                          >
                            <image :src="`${sq_image_path}/chineseSurname/jiating_jierijieqiIcon.png`"
                                   style="width: 15px;height: 15px;"></image>
                            <view style="margin-left: 4px;font-size: 12px;color: #FFFFFF;font-weight: 500;">
                              倒计时
                            </view>
                          </view>
                        </view>
                      </view>

                    </view>
                  </uni-col>
                  <view style="height: 10px;"></view>
                </uni-row>
              </uni-col>
            </uni-row>
          </view>
        </view>
      </uni-col>
    </uni-row>
    <!-- 老黄历 -->
    <uni-row style="margin-top: 10px;width: 100%;"
             class="flex align-center justify-between flex-sub"
             v-if="current == 5"
    >
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="bg_FFFFFF flex flex-column align-center"
               style="border-radius: 8px"
               :style="{height: `calc(95vh - ${headerHeight + 10}px)`}"
      >
        <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
              class="flex align-center justify-between">
          <view class="flex align-end" style="margin-left: 20px;">
            <view class="flex align-center">
              <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
              <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                老黄历
              </view>
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              {{ realTimeTime }}
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              {{ todayInfo.gzYear }}年{{ todayInfo.IMonthCn }}{{ todayInfo.IDayCn }}
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              {{ todayInfo.ncWeek }}
            </view>
            <view style="font-size: 20px;color: #363636;margin-left: 10px;white-space: nowrap" class="fw_500">
              第{{ todayInfo.whichWeek }}周
            </view>
          </view>
        </view>

        <view style="width: 96%;margin-top: 10px;overflow-y: scroll"
              :style="{height: `calc(95vh - ${headerHeight + 10 + 95}px)`}"
        >
          <view style="width: 100%;" class="flex flex-column align-center">
            <uni-row style="width: 100%;"
                     class="flex align-center justify-between"
            >
              <uni-col :span="24"
                       style="background: #FFF8E8;border-radius: 8px;padding: 20px 10px"
              >
                <uni-row style="width: 100%" class="flex">
                  <uni-col :span="8" style="padding-right: 17px;border-right: 1px solid #FAD582">
                    <view class="timeListDetail_listLabel flex flex-row align-center">
                      <view class="timeListDetail_listLabel_line"></view>
                      <text class="timeListDetail_listLabel_text"
                            style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                      >
                        今日宜忌
                      </text>
                    </view>
                    <view class="timeListDetail_content flex align-start"
                          style="margin-top: 20px;"
                    >
                      <MarkLists title="宜" is_color></MarkLists>
                      <view class="timeListDetail_content_text"
                            style="margin-left: 10px;font-size: 20px;color: #91643D;font-weight: 500;"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.yi"
                      >
                        {{
                          oldYellowCalendarInfo.content.yi || ''
                        }}
                      </view>
                    </view>
                    <view class="timeListDetail_content flex align-start"
                          style="margin-top: 20px;"
                    >
                      <MarkLists title="忌"></MarkLists>
                      <text class="timeListDetail_content_text"
                            style="margin-left: 10px;font-size: 20px;color: #91643D;font-weight: 500;"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.ji"
                      >
                        {{
                          oldYellowCalendarInfo.content.ji || ''
                        }}
                      </text>
                    </view>
                  </uni-col>
                  <uni-col :span="8" style="padding:0 17px;border-right: 1px solid #FAD582">
                    <view class="timeListDetail_listLabel flex flex-row align-center">
                      <view class="timeListDetail_listLabel_line"></view>
                      <text class="timeListDetail_listLabel_text"
                            style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                      >
                        今日神位
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 20px;"
                    >
                      <text class="timeListDetail_description_text"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhiri"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        值日: {{
                          oldYellowCalendarInfo.content.zhiri || ''
                        }}
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 10px;"
                    >
                      <text class="timeListDetail_description_text"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhishen"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        值神: {{
                          oldYellowCalendarInfo.content.zhishen || ''
                        }}
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 10px;"
                    >
                      <text class="timeListDetail_description_text"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.tszf"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        胎神占方: {{
                          oldYellowCalendarInfo.content.tszf || ''
                        }}
                      </text>
                    </view>
                  </uni-col>
                  <uni-col :span="8" style="padding:0 17px;">
                    <view class="timeListDetail_listLabel flex flex-row align-center">
                      <view class="timeListDetail_listLabel_line"></view>
                      <text class="timeListDetail_listLabel_text"
                            style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                      >
                        今日趋忌
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 20px;"
                    >
                      <text class="timeListDetail_description_text"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.jsyq"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        吉神宜趋: {{
                          oldYellowCalendarInfo.content.jsyq || ''
                        }}
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 10px;"
                    >
                      <text class="timeListDetail_description_text"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.xsyj"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        凶神宜忌: {{
                          oldYellowCalendarInfo.content.xsyj || ''
                        }}
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 10px;"
                    >
                      <text class="timeListDetail_description_text"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.pzbj"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        彭祖百忌: {{
                          oldYellowCalendarInfo.content.pzbj || ''
                        }}
                      </text>
                    </view>
                  </uni-col>
                </uni-row>
              </uni-col>
            </uni-row>
            <uni-row style="margin-top: 20px;flex-wrap: wrap"
                     class="flex align-center justify-between"
            >
              <uni-col :span="12"
                       class="flex align-center justify-center"
                       v-for="(item,index) in oldYellowCalendarInfo.list" :key="index"
              >
                <uni-row
                  style="width: 98%;background: #FFF8E8;border-radius: 8px;padding: 20px 10px;margin-bottom: 20px;"
                  class="flex">
                  <uni-col :span="12" style="padding-right: 17px;border-right: 1px solid #FAD582">
                    <view class="timeListDetail_listLabel flex flex-row align-center">
                      <view class="timeListDetail_listLabel_line"></view>
                      <text class="timeListDetail_listLabel_text"
                            style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                      >
                        {{ item.name }}宜忌
                      </text>
                      <view class="theDurationOfTheDay_left flex align-center"
                            style="margin-left: 10px;font-size: 16px;color: #FF4206;font-weight: 500;"
                      >
                        <view class="theDurationOfTheDay_left_hour">
                          {{ `${item.shijian.split('-')[0].split(':')[0]}:${item.shijian.split('-')[0].split(':')[1]}`
                          }}
                        </view>
                        <view class="theDurationOfTheDay_left_tips ml_2 mr_2">至</view>
                        <view class="theDurationOfTheDay_left_hour">
                          {{ `${item.shijian.split('-')[1].split(':')[0]}:${item.shijian.split('-')[1].split(':')[1]}`
                          }}
                        </view>
                      </view>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 20px;"
                    >
                      <text class="timeListDetail_description_text"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhiri"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        吉凶: {{
                          item.jixiong || ''
                        }}
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 20px;"
                    >
                      <text class="timeListDetail_description_text"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhiri"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        时冲: {{
                          item.shichong || ''
                        }}
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 20px;"
                    >
                      <text class="timeListDetail_description_text"
                            v-if="!!oldYellowCalendarInfo.content && !!oldYellowCalendarInfo.content.zhiri"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        时柱: {{
                          item.shizhu || ''
                        }}
                      </text>
                    </view>
                  </uni-col>
                  <uni-col :span="12" style="padding:0 17px;">
                    <view class="timeListDetail_listLabel flex flex-row align-center">
                      <view class="timeListDetail_listLabel_line"></view>
                      <text class="timeListDetail_listLabel_text"
                            style="margin-left: 10px;font-size: 20px;font-weight: 500;color: #91643D;"
                      >
                        今日吉凶
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 20px;"
                    >
                      <text class="timeListDetail_description_text"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        吉神: {{
                          item.jishen || ''
                        }}
                      </text>
                    </view>
                    <view class="timeListDetail_description"
                          style="margin-top: 10px;"
                    >
                      <text class="timeListDetail_description_text"
                            style="font-size: 20px;color: #91643D;font-weight: 500;"
                      >
                        凶神: {{
                          item.xiongshen || ''
                        }}
                      </text>
                    </view>
                  </uni-col>
                </uni-row>
              </uni-col>
            </uni-row>
          </view>
        </view>
      </uni-col>

    </uni-row>
  </uni-row>
</template>

<style scoped lang="scss">
  .active {
    background: url($uni-bg-url-sq + "/index/pc_genealogy_bg_active.png") no-repeat;
    background-size: 100% 100%;
  }

  .no_active {
    background: url($uni-bg-url-sq + "/index/pc_genealogy_bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .mrZhongWu_founder_right_operation_list_image {
    width: 30px;
    height: 30px;
  }

  .genealogy_bg_icon {
    background: url($uni-bg-url-sq + "/index/pc_genealogy_bg_icon.png") no-repeat;
    background-size: 100% 100%;
  }

  .firstAncestor_bg {
    background: url($uni-bg-url-sq + "/index/pc_firstAncestor_bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .timeListDetail_listLabel_line {
    width: 8px;
    height: 22px;
    background: #FF4206;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
</style>